﻿<template>
  <van-popup v-model="visible" position="bottom" closeable>
    <van-form @submit="handleSubmit" :loading="loading">
      <van-field
        v-model="formFields.Name"
        name="Name"
        label="菜单名"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field
        readonly
        clickable
        name="上级菜单"
        :value="formFields.ParentName"
        label="上级菜单"
        placeholder="上级菜单"
        @click="showPickerclick"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          ref="picker"
          show-toolbar
          value-key="Text"
          :columns="ParentIdTreeData"
          @confirm="onConfirmParent"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field name="Type" label="类型">
        <template #input>
          <van-radio-group v-model="formFields.Type" direction="horizontal">
            <van-radio :name="0" shape="square">菜单</van-radio>
            <van-radio :name="1" shape="square">页面</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="formFields.Url"
        name="Url"
        label="路径(页面必须配置)"
        :rules="[{ required: false, message: '请输入路径' }]"
      />
      <van-field name="NeedAction" label="是否需权限">
        <template #input>
          <van-radio-group
            v-model="formFields.NeedAction"
            direction="horizontal"
          >
            <van-radio :name="false" shape="square">否</van-radio>
            <van-radio :name="true" shape="square">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="formFields.Icon"
        name="Icon"
        label="图标"
        :rules="[{ required: false, message: '请输入图标' }]"
      />
      <van-field
        v-model="formFields.Sort"
        name="Sort"
        label="排序"
        :rules="[{ required: true, message: '必填' }]"
      />

      <div style="margin: 16px;">
        <van-button
          block
          type="info"
          native-type="submit"
          v-if="hasPerm('Base_Action.Edit')"
          >提交</van-button
        >
      </div>
    </van-form>
  </van-popup>
</template>

<script>
import {
  Base_Action_GetMenuTreeList,
  Base_Action_GetTheData,
  Base_Action_SaveData
} from "@/api/Base_Manage/Base_Action";
import { mapGetters } from "vuex";

export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formFields: {
        ParentId: "",
        ParentName: "",
        Type: 0,
        Name: "",
        Url: "",
        Value: "",
        NeedAction: false,
        Icon: "",
        Sort: 0
      },
      entity: {},
      showPicker: false,
      ParentIdTreeData: []
    };
  },
  computed: {
    ...mapGetters(["hasPerm"])
  },
  methods: {
    add() {
      this.entity = {};
      this.visible = true;
      this.formFields = {
        ParentId: "",
        ParentName: "",
        Type: 0,
        Name: "",
        Url: "",
        Value: "",
        NeedAction: false,
        Icon: "",
        Sort: 0
      };

      this.init();
    },
    edit(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.formFields = {
          ParentId: "",
          ParentName: "",
          Type: 0,
          Name: "",
          Url: "",
          Value: "",
          NeedAction: false,
          Icon: "",
          Sort: 0
        };

        Base_Action_GetTheData({ id: id }).then(resJson => {
          this.entity = resJson.Data;
          Object.keys(this.formFields).forEach(item => {
            this.formFields[item] = this.entity[item];
          });

          this.init();
        });
      });
    },

    handleSubmit(value) {
      this.entity = Object.assign(this.entity, this.formFields);
      this.loading = true;
      Base_Action_SaveData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },

    init() {
      Base_Action_GetMenuTreeList({}).then(resJson => {
        if (resJson.Success) {
          this.ParentIdTreeData = resJson.Data;
          for (let i = 0; i < this.ParentIdTreeData.length; i++) {
            this.ParentIdTreeData[i].children = null;
            if (this.ParentIdTreeData[i].Id === this.formFields.ParentId) {
              this.formFields.ParentName = this.ParentIdTreeData[i].Text;
            }
          }
        }
      });
    },

    showPickerclick() {
      this.showPicker = true;
      this.$nextTick(() => {
        let indexes = [];
        for (let i = 0; i < this.ParentIdTreeData.length; i++) {
          if (this.ParentIdTreeData[i].Id === this.formFields.ParentId) {
            indexes.push(i);
            break;
          }
        }
        this.$refs.picker.setIndexes(indexes);
      });
    },
    onConfirmParent(value, index) {
      let parent = value;
      this.formFields.ParentId = parent.Id;
      this.formFields.ParentName = parent.Text;
      this.showPicker = false;
    }
  }
};
</script>
